import React from 'react'

class LifeCycle extends React.PureComponent{
    // @初始化阶段
    constructor(){
        super()
        this.state = {
            count:1
        }
        console.log('constructor')
    }

    // @挂载阶段
    // componentWillMount已经不推荐使用，并改名为UNSAFE_componentWillMount
    UNSAFE_componentWillMount(){
        console.log('componentWillMount')
    }
    componentDidMount(){
        console.log('componentDidMount',this.state)

        // 定时器
       this.timer = setInterval(()=>{console.log('interval')},1000)

        // ajax请求: 1分钟才返回数据
        // this.xhr = new XMLHttpRequest()
    }

    // @更新阶段
    UNSAFE_componentWillUpdate(){
        console.log('componentWillUpdate',this.state.count)
    }
    componentDidUpdate(){
        console.log('componentDidUpdate',this.state.count)
    }

    // @更新条件判断: 可以用于性能优化
    // shouldComponentUpdate(nextProps, nextState){
    //     // 需求1：当count为5的倍数时才渲染组件
    //     console.log('shouldComponentUpdate.state',this.state,nextState)
    //     console.log('shouldComponentUpdate.props',this.props,nextProps)
    //     // if(nextState.count%5===0){
    //     //     return true
    //     // }
    //     // return false;
        
    //     // 解决父组件刷新导致当前组件跟着刷新的场景
    //     // 如何判断两个对象是否相同
    //     if(JSON.stringify(nextProps) === JSON.stringify(this.props) && JSON.stringify(nextState) === JSON.stringify(this.state)){
    //         return false
    //     }
    //     return true
    // }

    // @销毁阶段
    componentWillUnmount(){
        console.log('componentWillUnmount')
        clearInterval(this.timer)

        // 如何取消ajax
        // this.xhr.abort()
    }

    // UNSAFE_componentWillReceiveProps(){

    // }
    render(){
        console.log('render')
        return (
            <div>
                <h4>类组件生命周期</h4>
                <button onClick={()=>{
                    this.setState({
                        count:this.state.count+1
                    })
                    // this.state.count++
                    // console.log('count',this.state.count)
                }}>count:{this.state.count}</button>

                <div>age:{this.props.age}</div>
            </div>
        )
    }
}

export default LifeCycle